<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>网站后台管理模版</title>
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="./static/css/admin.css" />
<script src="./js/jquery-2.0.3.js" type="text/javascript"
	charset="utf-8"></script>
<!-- 引入 echarts.js -->
<script src="./js/echarts.min.js"></script>

<!-- 首页数据展示 -->
<script type="text/javascript">
	$(function() {

		$.ajax({
			url : "getCount", //请求的url地址
			type : "GET", //请求方式				 
			success : function(data) { //返回的为一个int值，并非json格式
				console.log(data);
				$("#empnum").html(data);
			},
		});

		$.ajax({
			url : "getCountByApply", //请求的url地址
			type : "GET", //请求方式				 
			success : function(data) { //返回的为一个int值，并非json格式
				console.log(data);
				$("#applynum").html(data);
			},
		});

		$.ajax({
			url : "getCountBydelivery", //请求的url地址
			type : "GET", //请求方式				 
			success : function(data) { //返回的为一个int值，并非json格式
				console.log(data);
				$("#disliverynum").html(data);
			},
		});

	})
</script>





</head>
<body>
	<div class="wrap-container welcome-container">
		<div class="row">
			<div class="welcome-left-container col-lg-9">
				<div class="data-show">
					<ul class="clearfix">
						<li class="col-sm-12 col-md-4 col-xs-12"><a
							href="javascript:;" class="clearfix">
								<div class="icon-bg bg-org f-l">
									<span class="iconfont">&#xe606;</span>
								</div>
								<div class="right-text-con">
									<p class="name">员工数</p>
									<p>
										<span class="color-org" id="empnum"></span>数据<span
											class="iconfont">&#xe628;</span>
									</p>
								</div>
						</a></li>
						<li class="col-sm-12 col-md-4 col-xs-12"><a
							href="javascript:;" class="clearfix">
								<div class="icon-bg bg-blue f-l">
									<span class="iconfont">&#xe602;</span>
								</div>
								<div class="right-text-con">
									<p class="name">用料申请单数</p>
									<p>
										<span class="color-blue" id="applynum"></span>数据<span
											class="iconfont">&#xe628;</span>
									</p>
								</div>
						</a></li>
						<li class="col-sm-12 col-md-4 col-xs-12"><a
							href="javascript:;" class="clearfix">
								<div class="icon-bg bg-green f-l">
									<span class="iconfont">&#xe605;</span>
								</div>
								<div class="right-text-con">
									<p class="name">已审批数</p>
									<p>
										<span class="color-green" id="disliverynum"></span>数据<span
											class="iconfont">&#xe60f;</span>
									</p>
								</div>
						</a></li>
					</ul>
				</div>



				<!--图表-->
				<div class="chart-panel panel panel-default">
					<div class="panel-body" id="main" style="height: 400px;"></div>
				</div>



				<!--服务器信息-->
				<div class="server-panel panel panel-default">
					<div class="panel-header">服务器信息</div>
					<div class="panel-body clearfix">
						<div class="col-md-2">
							<p class="title">服务器环境</p>
							<span class="info">Apache/Tomcat 8.5 </span>
						</div>
						<div class="col-md-2">
							<p class="title">服务器IP地址</p>
							<span class="info">127.0.0.1 </span>
						</div>
						<div class="col-md-2">
							<p class="title">服务器域名</p>
							<span class="info">knowno.cn </span>
						</div>
						<div class="col-md-2">
							<p class="title">Java版本</p>
							<span class="info">8.0</span>
						</div>
						<div class="col-md-2">
							<p class="title">数据库信息</p>
							<span class="info">MySQL 5.5 </span>
						</div>
						<div class="col-md-2">
							<p class="title">服务器当前时间</p>
							<span class="info">2019年5月1日</span>
						</div>
					</div>
				</div>
			</div>






			<div class="welcome-edge col-lg-3">
				<div class="chart-panel panel panel-default">
					<div class="panel-body" id="main2" style="height: 400px;"></div>
				</div>

			</div>
		</div>
	</div>
	<script src="./layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="./static/lib/echarts/echarts.js"></script>


	<script type="text/javascript">
		$(function() {
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));

			$.ajax({
				url : "countbydept",
				type : "get",
				success : function(data) {
					//console.log("是不是数组：" + data);

					// 指定图表的配置项和数据
					var option = {
						color : [ '#3398DB' ],
						tooltip : {
							trigger : 'axis',
							axisPointer : { // 坐标轴指示器，坐标轴触发有效
								type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
							}
						},
						title : {
							text : '各部门申请情况'
						},
						grid : {
							left : '3%',
							right : '4%',
							bottom : '3%',
							containLabel : true
						},

						tooltip : {},
						legend : {
							data : [ '申请单数量' ]
						},

						xAxis : [ {
							type : 'category',
							data : [ '工程部', '技术部', '采购部', '质检部', '生管部', '财务部',
									'销售部' ],
							axisTick : {
								alignWithLabel : true
							}
						} ],
						yAxis : [ {
							type : 'value'
						} ],
						series : [ {
							name : '申请单数量',
							type : 'bar',
							barWidth : '50%',
							data : data
						//返回的数组
						} ]

					};

					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				},
			});

		});
	</script>




	<script type="text/javascript">
		$(function() {
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main2'));

			$.ajax({
				url : "chartbyapprove",
				type : "get",
				success : function(data) {
					
					console.log("看看第一个能不能输出："+data);
					
					// 指定图表的配置项和数据
					var option = {
						title : {
							text : '各部门用料占比'
						},
						tooltip : {
							trigger : 'item',
							formatter : '{a} <br/>{b}: {c} ({d}%)'
						},
						legend : {
							orient : 'vertical',
							top : 40,
							left : 10,
							data : [ '工程部', '技术部', '采购部', '质检部', '生管部', '财务部',
									'销售部' ]
						},
						series : [ {
							top : 120,
							name : '占比',
							type : 'pie',
							radius : [ '50%', '70%' ],
							avoidLabelOverlap : false,
							label : {
								show : false,
								position : 'center'
							},
							emphasis : {
								label : {
									show : true,
									fontSize : '30',
									fontWeight : 'bold'
								}
							},
							labelLine : {
								show : false
							},
							data : [ {
								value : data[0],
								name : '工程部'
							}, {
								value : data[1],
								name : '技术部'
							}, {
								value : data[2],
								name : '采购部'
							}, {
								value : data[3],
								name : '质检部'
							}, {
								value : data[4],
								name : '生管部'
							} , {
								value : data[5],
								name : '财务部'
							}, {
								value : data[6],
								name : '销售部'
							}]
						} ]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				}
			});

		});
	</script>
</body>
</html>
